<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险等级分析报告</title>
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('百度ECharts')" />
    <style>
        .bing{
            height: 500px;
            width: 80%;
            margin-left: 68px;
        }

        .lisi{
            height: 500px;
            width: 80%;
            margin-left: 68px;
        }

    </style>

</head>
<body class="gray-bg">
    <div class="row animated fadeInRight">
        <div class="ibox float-e-margins" >
            <div class="text-center float-e-margins p-md">
                <span style="font-size: 25px;">[[${riskLevelData.org}]]风险等级分析报告 </span>
<!--                <a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>-->
<!--                <a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>-->
            </div>
            <div id="ibox-content">
                 <div id="vertical-timeline" class="vertical-container light-timeline">
                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon navy-bg">
                             <i class="fa fa-briefcase"></i>
                         </div>

                         <div class="vertical-timeline-content">
                             <h2>报告编号 :[[${riskLevelData.ristLevel}]] &nbsp; &nbsp; &nbsp; 时间 :[[${#dates.format(riskLevelData.time,'yyyy-MM-dd HH:mm:ss')}]]</h2>
                             <p>风险类型 : <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==3}">火灾</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==2}">盗窃</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==1}">盗掘</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==4}">法人违法</label>
                             </p>
                             <a th:href="@{/index}" class="btn btn-sm btn-info" style="margin-left: 10px;"> 管理后台</a>
                             <a th:href="'/system/main?orgId='+${id}"  class="btn btn-sm btn-info"> 返回大屏</a>
                             <span class="vertical-date">
                         	风险等级 : [[${riskLevelData.ristLevel}]]<br><br>
                         <small style="color:orangered">涉及异常事件总数 :[[${ROrgRiskEvents.size()}]]</small>
                     </span>
                         </div>
                     </div>

                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon blue-bg">
                             <i class="fa fa-file-text"></i>
                         </div>
                         <div class="echarts lisi" id="main"></div>


                     </div>
<!--                     <div class="vertical-timeline-block">-->
<!--                         <div class="vertical-timeline-icon blue-bg">-->
<!--                             <i class="fa fa-file-text"></i>-->
<!--                         </div>-->

<!--                         <div class="echarts bing" id="echarts-pie-chart"></div>-->

<!--                     </div>-->

                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon blue-bg">
                             <i class="fa fa-file-text"></i>
                         </div>
                         <div class="echarts lisi" id="echarts-bar-chart"></div>


                     </div>






                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon lazur-bg">
                             <i class="fa fa-coffee"></i>
                         </div>

                         <div class="ibox lisi">
                             <div class="ibox-content">
                                 <h5>详细信息</h5>
                                 <table class="table table-stripped small m-t-md">
                                     <tbody>
                                     <tr th:each="orgE : ${ROrgRiskEvents}">
                                         <td class="no-borders">
                                             <i class="fa fa-circle text-danger"></i>
                                         </td>
                                         <td class="no-borders">
                                             风险名称： [[${orgE.name}]],  风险事件： [[${orgE.riskType}]],   经纬度： [[${orgE.coordinate}]],    设备： [[${orgE.device}]], 时间：[[${#dates.format(orgE.createTime,'yyyy-MM-dd HH:mm:ss')}]]
                                         </td>
                                     </tr>


                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>

                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon yellow-bg">
                             <i class="fa fa-file-text"></i>
                         </div>

                         <div class="vertical-timeline-content">
                             <h2>其他信息</h2>
                             <p>[[${riskLevelData.desc}]]</p>
<!--                             <span class="vertical-date">昨天 <br><small>2月2日</small></span>-->
                         <input type="hidden" id="lev" th:value="${lev}">
                         </div>
                     </div>

                 </div>
             </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script>
        $(document).ready(function(){
            $('#lightVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').removeClass('ibox-content');
                $('#vertical-timeline').removeClass('dark-timeline');
                $('#vertical-timeline').addClass('light-timeline');
            });
            $('#darkVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').addClass('ibox-content');
                $('#vertical-timeline').removeClass('light-timeline');
                $('#vertical-timeline').addClass('dark-timeline');
            });
        });
    </script>
    <script>




        // var categories = [];
        // for (var i = 0; i < 2; i++) {
        //     categories[i] = {
        //         name: '类目' + i
        //     };
        // }
        // option = {
        //     // 图的标题
        //     title: {
        //         text: 'ECharts 关系图'
        //     },
        //     // 提示框的配置
        //     tooltip: {
        //         formatter: function (x) {
        //             return x.data.des;
        //         }
        //     },
        //     // 工具箱
        //     toolbox: {
        //         // 显示工具箱
        //         show: true,
        //         feature: {
        //             mark: {
        //                 show: true
        //             },
        //             // 还原
        //             restore: {
        //                 show: true
        //             },
        //             // 保存为图片
        //             saveAsImage: {
        //                 show: true
        //             }
        //         }
        //     },
        //     legend: [{
        //         // selectedMode: 'single',
        //         data: categories.map(function (a) {
        //             return a.name;
        //         })
        //     }],
        //     series: [{
        //         type: 'graph', // 类型:关系图
        //         layout: 'force', //图的布局，类型为力导图
        //         symbolSize: 40, // 调整节点的大小
        //         roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        //         edgeSymbol: ['circle', 'arrow'],
        //         edgeSymbolSize: [2, 10],
        //         edgeLabel: {
        //             normal: {
        //                 textStyle: {
        //                     fontSize: 20
        //                 }
        //             }
        //         },
        //         force: {
        //             repulsion: 2500,
        //             edgeLength: [10, 50]
        //         },
        //         draggable: true,
        //         lineStyle: {
        //             normal: {
        //                 width: 2,
        //                 color: '#4b565b',
        //             }
        //         },
        //         edgeLabel: {
        //             normal: {
        //                 show: true,
        //                 formatter: function (x) {
        //                     return x.data.name;
        //                 }
        //             }
        //         },
        //         label: {
        //             normal: {
        //                 show: true,
        //                 textStyle: {}
        //             }
        //         },
        //
        //         // 数据
        //         data: [{
        //             name: 'node01',
        //             des: 'nodedes01',
        //             symbolSize: 70,
        //             category: 0,
        //         }, {
        //             name: 'node02',
        //             des: 'nodedes02',
        //             symbolSize: 50,
        //             category: 1,
        //         }, {
        //             name: 'node03',
        //             des: 'nodedes3',
        //             symbolSize: 50,
        //             category: 1,
        //         }, {
        //             name: 'node04',
        //             des: 'nodedes04',
        //             symbolSize: 50,
        //             category: 1,
        //         }, {
        //             name: 'node05',
        //             des: 'nodedes05',
        //             symbolSize: 50,
        //             category: 1,
        //         }],
        //         links: [{
        //             source: 'node01',
        //             target: 'node02',
        //             name: 'link01',
        //             des: 'link01des'
        //         }, {
        //             source: 'node01',
        //             target: 'node03',
        //             name: 'link02',
        //             des: 'link02des'
        //         }, {
        //             source: 'node01',
        //             target: 'node04',
        //             name: 'link03',
        //             des: 'link03des'
        //         }, {
        //             source: 'node01',
        //             target: 'node05',
        //             name: 'link04',
        //             des: 'link05des'
        //         }],
        //         categories: categories,
        //     }]
        // };
        // myChart.setOption(option);


    </script>

    <script type="text/javascript" th:inline="javascript">
        var id = [[${id}]];
        $(function () {

            var myChart = echarts.init(document.getElementById('main'));

            // $.getJSON("../system/risk/list?orgId=" + id +"&lev=" + $("#lev").val(), function (r) {
                var  data = [{
                    name: '风险统计',
                    des: '风险统计',
                    symbolSize: 70,
                    category: 0,
                }]
                var  links = []
                var categories = [{
                    name: '风险统计',
                }];
                var list = [[ ${ROrgRiskEvents}]];
                console.log(list)
                $.each(list, function(index, value) {
                    categories.push(
                        {
                            'name': value.riskType,
                        })
                    data.push(
                    {
                        'name': value.riskType+'('+value.createTime+')',
                        'des': value.name,
                        'symbolSize': 70,
                        'category': value.riskType,
                    })
                    links.push(
                        {
                            'source': '风险统计',
                            'target': value.riskType+'('+value.createTime+')',
                            'name': value.device,
                            'des': value.coordinate
                        })
                })
                // var categories = [];
                // for (var i = 0; i < 2; i++) {
                //     categories[i] = {
                //         name: '类目' + i
                //     };
                // }
              var  option = {
                    // 图的标题
                    title: {
                        text: '风险统计'
                    },
                    // 提示框的配置
                    tooltip: {
                        formatter: function (x) {
                            return x.data.des;
                        }
                    },
                    // 工具箱
                    toolbox: {
                        // 显示工具箱
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            // 还原
                            restore: {
                                show: true
                            },
                            // 保存为图片
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    legend: [{
                        // selectedMode: 'single',
                        data: categories.map(function (a) {
                            return a.name;
                        })
                    }],
                    series: [{
                        type: 'graph', // 类型:关系图
                        layout: 'force', //图的布局，类型为力导图
                        symbolSize: 40, // 调整节点的大小
                        roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [2, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        force: {
                            repulsion: 2500,
                            edgeLength: [10, 50]
                        },
                        draggable: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#4b565b',
                            }
                        },
                        edgeLabel: {
                            normal: {
                                show: true,
                                formatter: function (x) {
                                    return x.data.name;
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {}
                            }
                        },

                        // 数据
                        data: data,

                        //     [{
                        //     name: '异常统计',
                        //     des: '异常事件统计',
                        //     symbolSize: 70,
                        //     category: 0,
                        // },
                            // {
                        //     name: 'node02',
                        //     des: 'nodedes02',
                        //     symbolSize: 50,
                        //     category: 1,
                        // }, {
                        //     name: 'node03',
                        //     des: 'nodedes3',
                        //     symbolSize: 50,
                        //     category: 1,
                        // }, {
                        //     name: 'node04',
                        //     des: 'nodedes04',
                        //     symbolSize: 50,
                        //     category: 1,
                        // }, {
                        //     name: 'node05',
                        //     des: 'nodedes05',
                        //     symbolSize: 50,
                        //     category: 1,
                        // }
                        //     ],
                        links: links,

                        //     [{
                        //     source: 'node01',
                        //     target: 'node02',
                        //     name: 'link01',
                        //     des: 'link01des'
                        // }, {
                        //     source: 'node01',
                        //     target: 'node03',
                        //     name: 'link02',
                        //     des: 'link02des'
                        // }, {
                        //     source: 'node01',
                        //     target: 'node04',
                        //     name: 'link03',
                        //     des: 'link03des'
                        // }, {
                        //     source: 'node01',
                        //     target: 'node05',
                        //     name: 'link04',
                        //     des: 'link05des'
                        // }],
                        categories: categories,
                    }]
                };
                myChart.setOption(option);


            // })




            // var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            // var type = [[${type}]];
            // console.log(type)

            console.log(id)
            // $.getJSON("../system/risk/list?orgId=" + id +"&lev=" + $("#lev").val(), function (r) {
            //     var title = "风险统计";
            //     var names = []
            //     var  data = []
            //     $.each(r.rows, function(index, value) {
            //         names.push(value.name)
            //         data.push({'name':value.name, 'value':value.cnt})
            //     })
            //     var pieoption = {
            //         title: {
            //             text: title,
            //             subtext: '',
            //             x: 'center'
            //         },
            //         tooltip: {
            //             trigger: 'item',
            //             formatter: "{a} <br/>{b} : {c} ({d}%)"
            //         },
            //         legend: {
            //             orient: 'vertical',
            //             x: 'left',
            //             data: names
            //         },
            //         calculable: true,
            //         series: [
            //             {
            //                 name: title,
            //                 type: 'pie',
            //                 radius: '55%',
            //                 center: ['50%', '60%'],
            //                 data: data
            //             }
            //         ]
            //     };
            //     pieChart.setOption(pieoption);
            //     $(window).resize(pieChart.resize);
            //
            // })

            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));

            $.getJSON("../system/history/list?orgId=" + id +"&_" + $.now(), function (r) {
                var title = "历史统计";
                var names = []
                let data = []
                let series_data = []
                let yAxis_data = []
                $.each(r.rows, function(index, value) {
                    if(names.indexOf(value.name) == -1){
                        names.push(value.name)
                    }
                })
                for (let i = 0; i < names.length; i++) {
                    data_cur = [0,0,0,0,0,0,0,0,0,0,0,0]
                    data.push(data_cur)
                }
                $.each(r.rows, function(index, value) {
                    idx_name = names.indexOf(value.name)
                    month = value.month
                    data[idx_name][value.month-1] = value.cnt
                })

                for (let i = 0; i < names.length; i++) {
                    if(i < (names.length - 1)) {
                        series_data.push({
                            name: names[i],
                            type: 'bar',
                            data: data[i],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        })
                    } else {
                        series_data.push({
                            name: names[i],
                            type: 'bar',
                            data: data[i],
                            markPoint: {
                                data: [
                                    {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        })
                    }
                }
                for (let i = 0; i < names.length; i++) {
                    yAxis_data.push(
                        {
                            type: 'value',
                            name: names[i],
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    )
                }

                var baroption = {
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: names
                    },
                    grid: {
                        x: 30,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: yAxis_data,
                    series: series_data
                };
                barChart.setOption(baroption);
                window.onresize = barChart.resize;
            })




        });
    </script>
</body>
</html>
